<template>
	<div>
		<el-form :inline="true" :model="query" label-width="130px" size="small">
			<!-- 申请申请ID查询 -->
			<el-form-item label="申请ID：" class="query-form-item">
				<el-input v-model="query.id" placeholder="请输入申请ID" prefix-icon="el-icon-search"
					@change="onSubmit" clearable></el-input>
			</el-form-item>
			<!-- 申请公司名称查询 -->
			<el-form-item label="商城公司名称：" class="query-form-item">
				<el-input v-model="query.enterpriseName" placeholder="请输入公司名称" prefix-icon="el-icon-search"
					@change="onSubmit" clearable></el-input>
			</el-form-item>
			<!-- 申请生成时间 -->
			<el-form-item label="申请生成时间：">
				<el-date-picker v-model="createTime" unlink-panels type="datetimerange" :picker-options="pickerOptions"
					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="left"
					format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
					:default-time="['00:00:00','23:59:59']" @change="dateChange"></el-date-picker>
			</el-form-item>
			<!-- 查询框 -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onSubmit" size="small">搜索</el-button>
			</el-form-item>
		</el-form>
		<el-form :inline="true" :model="query" label-width="130px" size="small">
			<el-form-item label="申请状态：" class="query-form-item">
				<el-select v-model="query.auditstatus" placeholder="请选择状态" @change="onSubmit" clearable>
					<el-option label="待审核" value='0'> </el-option>
					<el-option label="已完成" value='1'> </el-option>
					<el-option  label="驳回"  value='2'> </el-option>
				</el-select>
			</el-form-item>
			<!-- 导出 -->
			<el-form-item>
				<el-button type="primary" @click="excell" size="small" style="margin-left:30px">导出</el-button>
			</el-form-item>
		</el-form>
		<!-- table表单 -->
		<el-table ref="multipleTable" v-loading="loading" :data="tableData"  @selection-change="handleSelectionChange"
			:header-cell-style="{background:'#F4F4F5',color:'#606266'}" border>
			<el-table-column type="selection"  width="55" fixed  ></el-table-column>
			<el-table-column label="序号" type="index" width="80" fixed align="center">
				<template scope="scope">
					<span>{{(query.currentPage - 1) * query.pageSize + scope.$index + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column label="申请ID" prop="id" align="center" width="150"></el-table-column>
			<el-table-column label="申请状态" prop="auditstatus" align="center" width="150">
				<template slot-scope="scope">
					<span v-if="scope.row.auditstatus ==0">待审核</span>
					<span v-if="scope.row.auditstatus ==1">已完成</span>
					<span v-if="scope.row.auditstatus ==2">驳回</span>
          		</template>
			</el-table-column>
			<el-table-column label="申请类型" prop="applicationtype" align="center" width="150" >
				<template slot-scope="scope">
					<span v-if="scope.row.applicationtype ==null">无</span>
					<span v-if="scope.row.applicationtype ==1">转账付款</span>
					<span v-if="scope.row.applicationtype ==2">现金付款</span>
					<span v-if="scope.row.applicationtype ==3">结款</span>
					
        		</template>
			</el-table-column>
			<el-table-column label="申请商城名称" prop="enterpriseName" align="center" width="150" />
			<el-table-column label="联系电话" prop="tel" align="center" width="150" />
			<el-table-column label="付款方" prop="payer" align="center" width="150" />
			<el-table-column label="付款账户" prop="banknumber" align="center" width="150" />
			<el-table-column label="收款账户" prop="corporateaccount" align="center" width="150" />
			<el-table-column label="资金凭证" prop="fundvoucher" align="center" width="150" />
			<el-table-column label="申请金额（元）" prop="transactionquota" align="center" width="150" />
			<el-table-column label="付款时间" prop="paytime" width="180" :show-overflow-tooltip="true" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.paytime!=null"></i>
					<span v-if="scope.row.paytime!=null">{{ scope.row.paytime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<el-table-column label="申请生成时间" prop="applicationtime" width="180" :show-overflow-tooltip="true" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.applicationtime!=null"></i>
					<span v-if="scope.row.applicationtime!=null">{{ scope.row.applicationtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<el-table-column label="申请结束时间" prop="completetime" width="180" :show-overflow-tooltip="true" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.completetime!=null"></i>
					<span v-if="scope.row.completetime!=null">{{ scope.row.completetime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<el-table-column label="备注" prop="remarks" align="center" width="150" />
			<el-table-column label="驳回原因" prop="rejectiontext" align="center" fixed="right" width="150" />
		</el-table>

		<el-pagination class="pagination-container" background :page-size="query.pageSize"
			@size-change="handleSizeChange" @current-change="handleCurrentChange"
			layout="total,sizes,prev, pager, next, jumper" :current-page="this.query.currentPage"
			:page-sizes="[5,10, 20, 30, 50]" :total="totalNumber"></el-pagination>
	</div>

</template>
<script>
	
	 import {BASE_URL} from "../../config/app";
	import {getPayEnd} from "../../api/fundsManagement";
	export default {
		data() {
			return {
				tableData: [], //列表集合
				createTime: [], //时间数组
				detailVisible: false, //新增弹窗
				pickerOptions: {
					//快速选择日期
					shortcuts: [{
							text: "最近一周",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.getTime() - 3600 * 1000 * 24 * 7
								);
								picker.$emit("pick", [start, end]);
							}
						},
						{
							text: "最近一个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.getTime() - 3600 * 1000 * 24 * 30
								);
								picker.$emit("pick", [start, end]);
							}
						},
						{
							text: "最近三个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.getTime() - 3600 * 1000 * 24 * 90
								);
								picker.$emit("pick", [start, end]);
							}
						},
						{
							text: "最近六个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.getTime() - 3600 * 1000 * 24 * 180
								);
								picker.$emit("pick", [start, end]);
							}
						}
					]
				},
				query: {
					currentPage: 1,
					pageSize: 5,
					id: '',
					ids:"",
					startTime: "", //开始时间
					endTime: "", //结束时间
					auditstatus: "",
					enterpriseName:"",
					transactiontype:1
					
				},
				mupArr:[],
				checkAll: false,
				totalNumber: 0,
				loading: false,
				reasons: "",
				formLabelWidth: '120px'
			}
		},
		methods: {
			handleSelectionChange(val){
				this.mupArr=val
				let ids = this.mupArr.map(item => item.id).join();
				this.query.ids =ids
				// console.log(this.query.ids)
			},

			//导出功能
			excell(){
				let id = this.query.id
				let auditstatus = this.query.auditstatus
				let transactiontype =this.query.transactiontype
				let startTime =this.query.startTime
				let endTime =this.query.startTime
				let enterpriseName =this.query.enterpriseName
				let ids =this.query.ids
				window.location.href =   
				 BASE_URL + "/goldendays-user/tradingAccountManager/exportPayApplyList?id=" + id+"&transactiontype="+transactiontype+"&enterpriseName="+enterpriseName
				 +"&startTime="+startTime+"&endTime="+endTime+"&auditstatus="+auditstatus+"&ids="+ids;
			},
			/*日期选择事件*/
			dateChange(val) {
				if (val == null) {
					this.query.startTime = "";
					this.query.endTime = "";
				} else {
					this.query.startTime = val[0];
					this.query.endTime = val[1];
					this.query.currentPage = 1;
				}
				this.getList();
				// console.log(this.query);
			},


			// 列表数据获取
			getList() {
				this.loading = true;
				getPayEnd(this.query)
					.then(data => {
						// console.log(data)
						if (data.code != 0) {
							this.$message.error(response.message);
							this.loading = false;
							return false;
						}
						this.tableData = data.data.list || []
						this.totalNumber = data.data.totalNumber || 0;
						// console.log(this.tableData)
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch(err => {
						this.loading = false;
						this.tableData = []
					})
			},
			//查询
			onSubmit() {
				this.query.currentPage = 1;
				this.getList()
			},
			handleCurrentChange(val) {
				this.query.currentPage = val;
				this.getList()
			},
			handleSizeChange(val) {
				this.query.pageSize = val;
				this.getList()
			},
		},

		mounted() {

		},
		created() {
			this.getList()
		}

	}
</script>
